<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<table border="1" cellspacing="0">
    <tr>
        <th></th>
        <th>商品ID</th>
        <th>商品名</th>
        <th>商品信息</th>
        <th>商品价格</th>
        <th>商品图片</th>
        <th>创建时间</th>
    </tr>
    <tbody class="container"></tbody>
    <tr>
        <td>
            <button class="button_del">删除选中所有</button>
        </td>
    </tr>
</table>
<script>
    var $_btn_del = $(".button_del");
    $(function(){
        fillTable();
    });

    function fillTable(){
        $.ajax({
            url: "http://localhost:8081/favorites/getByUser/1",
            type: "post",
            dataType: "json",
            success: function (favorites) {
                $(".container").empty();
                for (let i = 0; i < favorites.length; i++) {
                    var $_tr = $("<tr></tr>");
                    var $_td0 = $("<td><input type='checkbox' value='" + favorites[i].favoritesId + "'></td>");
                    var $_td1 = $("<td>" + favorites[i].commodity.commodityId + "</td>");
                    var $_td2 = $("<td>" + favorites[i].commodity.commodityName + "</td>");
                    var $_td3 = $("<td>" + favorites[i].commodity.commodityComm + "</td>");
                    var $_td4 = $("<td>" + favorites[i].commodity.commodityPrice + "</td>");
                    var $_td5 = $("<td><img src= '"+favorites[i].commodity.commodityPic+"' /></td>");
                    var $_td6 = $("<td>" + favorites[i].createTime + "</td>");
                    $_tr.append($_td0);
                    $_tr.append($_td1);
                    $_tr.append($_td2);
                    $_tr.append($_td3);
                    $_tr.append($_td4);
                    $_tr.append($_td5);
                    $_tr.append($_td6);
                    $(".container").append($_tr);
                }
            }
        })
    }
    $_btn_del.click(function () {
        //找到所有checkbox状态被选中的则调用删除
        $(":checkbox").each(function (index, ele) {
            //查找所有被选中的checkbox拿到他们身上的value
            if (ele.checked == true) {
                $.ajax({
                    url: "http://localhost:8081/favorites/remove/" + ele.value,
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        if (data == 1) {

                            alert("删除成功");
                        } else {
                            alert("删除失败");
                        }
                    }
                });
            }
        });
        fillTable();
    });
</script>
</body>
</html>
